<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>vue练习</title>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script  src="https://lib.baomitu.com/vue/2.5.17-beta.0/vue.js"></script>
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css?randomId=<%=Math.random()%">-->
    <!--<script src="http://unpkg.com/element-ui/lib/index.js?randomId=<%=Math.random()%"></script>-->
    <script src="rem.js"></script>

    <!-- 引入组件库 -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <link rel="stylesheet" href="mintui.css">
</head>
<body>
<div  id="contant_c">
    <div class="dingbu">头部</div>
    <div v-cloak  class="contant_c" >
        <!--父组件传值给子组件示例-->
        <!--<blog-a>-->
        <!--v-for="item in tableData"-->
        <!--v-bind:key="item.id"-->
        <!--v-on:child-by-value="childByValue"这句代码是子传父====================-->
        <!--:message="item.address"-->
        <!--:name="item.date"-->
        <!--</blog-a>-->
        <!--<p   v-for="item in tableData">{{data4}}</p>-->
        <!--父组件传值给子组件示例结束-->
        <!-- tabcontainer内容区域-->
            <mt-tab-container class="page-tabbar-container" v-model="selected" >
                <mt-tab-container-item id="外卖">
                    <div class="page-part">
                        <div id="app">
                            <div class="swipe-wrapper">
                                <mt-swipe :auto="3000" ref="swipeWrapper">
                                    <mt-swipe-item class="swip-item-1 item"></mt-swipe-item>
                                    <mt-swipe-item class="swip-item-2 item"></mt-swipe-item>
                                    <mt-swipe-item class="swip-item-3 item"></mt-swipe-item>
                                </mt-swipe>
                            </div>
                            <div class="spin_div">
                                {{txt1}}
                            </div>
                            <div id="container" class="lazy_ul">
                            <li v-for="(item,index) in list" :key="index">
                                <img v-lazy.container="item">
                                <span style="color: #ff2940;
                                display: flex;justify-content: center;align-items: center;width:6%;height: 100%;
                                margin-top:-77px;margin-left: .8rem;
                               ">{{index}}</span>
                            </li>
                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="订单">
                    <div class="page-part">
                        <blog-my></blog-my>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="发现">
                    <mt-cell v-for="n in 7"  :key="n.index" :title="'发现 ' + n" />
                </mt-tab-container-item>
                <mt-tab-container-item id="我的">
                     <mt-button class="loginout"  type="danger"  size="large">退出</mt-button>
                </mt-tab-container-item>
            </mt-tab-container>
        <!--底部tab-->
          <mt-tabbar v-model="selected" fixed class="tab" style="bottom: 0px;left: 0px">
            <mt-tab-item id="外卖" class="tab-item">
                <img slot="icon" class="img" src="liangren_03.jpg">
                <p class="tab_txt">外卖</p>
            </mt-tab-item>
            <mt-tab-item id="订单" class="tab-item">
                <img slot="icon" class="img" src="liangren_03.jpg">
                <p class="tab_txt" >订单</p>
            </mt-tab-item>
            <mt-tab-item id="发现" class="tab-item">
                <img slot="icon" class="img" src="liangren_03.jpg">
                <p class="tab_txt">发现</p>
            </mt-tab-item>
            <mt-tab-item id="我的" class="tab-item">
                <img slot="icon" class="img"  src="liangren_03.jpg">
                <p class="tab_txt">我的</p>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</div>

</body>
<script>
</script>
<!--头部子组件-->
<script src="head.js"></script>
<script src="contant_my.js"></script>
<script>
    new Vue({   //创建一个Vue的实例
        el: "#contant_c", //挂载点是id="app"的地方
        props: ['post','item'],
        data:{
            tableData: [{
                date: '222222',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
            }, {
                date: '444444',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
            }, {
                date: '111111',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
            }],
            show:true,
            data1: true,
            data2: "",
            data3: [1],
            data4:"国",
            isActive:true,
            isActive2:false,
            selected: '外卖',
            txt1:'谁是世界上最帅的人',
            list:["http://cdn.66173.cn/niuguo/img/login_bg.png",
               "http://cdn.66173.cn/niuguo/img/home_banner3.jpg",
                "http://cdn.66173.cn/niuguo/img/home_banner1.jpg",
                "http://cdn.66173.cn/niuguo/img/game2.png",
                "http://cdn.66173.cn/niuguo/img/home_banner3.jpg",
                "http://cdn.66173.cn/niuguo/img/home_banner1.jpg",
                "http://cdn.66173.cn/niuguo/img/game2.png",
                "http://cdn.66173.cn/niuguo/img/home_banner3.jpg",
                "http://cdn.66173.cn/niuguo/img/home_banner1.jpg",
                "http://cdn.66173.cn/niuguo/img/game2.png",
                "http://cdn.66173.cn/niuguo/img/home_banner3.jpg",
                "http://cdn.66173.cn/niuguo/img/home_banner1.jpg",
                "http://cdn.66173.cn/niuguo/img/game2.png",
                "http://cdn.66173.cn/niuguo/img/home_banner3.jpg",
                "http://cdn.66173.cn/niuguo/img/home_banner1.jpg",
                "http://cdn.66173.cn/niuguo/img/game2.png"
            ]
        },
        created(){
            this.load()
        },
        methods: {
            prev: function () {
                this.$refs.swipeWrapper.prev();
                console.log(this.$children);
            },
            next: function () {
                this.$refs.swipeWrapper.next();
            },
            load(){
                self=this;
                setTimeout(function () {
                    self.show=false;
                    self.txt1="当然是熊大呀呀呀";
                },3000)
            }
        }
    })
</script>
<script>
    // $(document).scroll(function(){
    //     var distance = $(document).scrollTop();
    //     console.log(distance)
    //     if(distance>50) {
    //         $('.dingbu').css({"backgroundColor":"#f0f0f0"})
    //         console.log("大大大")
    //     } else {
    //         $('.dingbu').css({"backgroundColor":"#82ea5e"},)
    //     }
    // })
    // $('.tab_txt').click(function(){
    //     console.log("bbbbbbbbbbbbbbbb")
    //     var distance = $(window).scrollTop();
    //     console.log(distance)
    //     $('html ,body').animate({scrollTop: 0},1);
    //     return false;
    //     getScroll()
    // });
    $(function(){
        $('.tab-item').click(function(){
            $('html ,body').animate({scrollTop: 0},1);
            return false;
        });
    });
</script>
</html>